<template>
  <div>

    <CategorySelector :isDisable="!IsShowAttr"></CategorySelector>
    <el-card style="margin-top:20px">


      <div v-if="IsShowAttr">
        <el-button type="primary" :icon="Plus" :disabled="!CategorySelecto.category3Id" @click="addAttr">


          添加属性</el-button>
        <el-table :data="attrList" border style=" margin-top: 20px;">

          <el-table-column type="index" label="序号" width="100" />
          <el-table-column label="属性名称" prop="attrName" width="160"></el-table-column>
          <el-table-column label="属性值列表">

            <template v-slot="{ row }">
              <div>
                <el-tag class="ml-2" type="success" style="margin-right: 10px;" :key="item.id"
                  v-for="item in row.attrValueList">{{ item.valueName }}</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column width="200" label="操作">

            <template v-slot="{ row }">
              <el-button type="warning" :icon="Edit" @click="EditAttrValue(row)">


              </el-button>

              <el-popconfirm title="确定要删除这条属性码" confirm-button-text="确定" cancel-button-text="取消"
                @confirm="confirmEvent(row)" @cancel="cancelEvent">
                <template #reference>

                  <el-button type="danger" :icon="Delete"></el-button>
                </template>
              </el-popconfirm>
            </template>

          </el-table-column>
        </el-table>



      </div>
      <div v-else>
        <el-card>
          <el-form>
            <el-form-item label="属性名">
              <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" style="width:30%" />
            </el-form-item>
            <el-form-item>

              <el-button type="primary" :disabled="!attrInfo.attrName" @click="addAttrValu">添加属性值</el-button>
              <el-button>取消</el-button>




            </el-form-item>
          </el-form>
          <el-table style="width: 100% ;margin-bottom:20px;" border :data="attrInfo.attrValueList">
            <el-table-column type="index" label="序号" width="100" align="center" />
            <el-table-column prop="valueName" label="属性值名称" width="180" align="center">

              <template v-slot="{ row }">
                <el-input ref="inputRef" v-model="row.valueName" @blur="Losevalue(row)"
                  v-if="row.IsShowInput"></el-input>
                <span v-else @dblclick="changeAttrValue(row)"
                  style="disply:inline-block;width:100%;">{{ row.valueName }}</span>
              </template>


            </el-table-column>



            <el-table-column prop="address" label="操作">
              <template v-slot="{ row, $index }">
                <el-popconfirm title="确定要删除这条属性码" confirm-button-text="确定" cancel-button-text="取消"
                  @confirm="DeleteEvent($index)">
                  <template #reference>
                    <el-button :icon="Delete" size="small" type="danger" ></el-button>
                  </template>
                </el-popconfirm>
              </template>

            </el-table-column>
          </el-table>
          <el-button type="primary" @click="saveOrUpdateAttrInfo">保存</el-button>
          <el-button @click="IsShowAttr = true">取消</el-button>
        </el-card>
      </div>



    </el-card>
  </div>


</template>

<script lang="ts">
export default {
  name: 'Attr'
}
</script>
<script setup lang="ts">
import { Plus, Edit, Delete } from '@element-plus/icons-vue';
import { ref, watch, reactive, nextTick } from 'vue'
import { useCategorySelectorStore } from "@/stores/categorySelector"
import { reqgetAttrListData, reqDeleteAttrData, reqSaveAttrData } from '@/api/product/AttrList'
import { ElMessage } from 'element-plus'
import type { InputInstance } from "element-plus"
import type { AttrValueModel, attrInfoModel } from '@/api/product/model/AttrModel';
//1调用函数
const CategorySelecto = useCategorySelectorStore()


const attrList = ref <attrInfoModel[]> ([])
//添加属性也
const IsShowAttr = ref(true)
//控制输入框月span标签 的显示
const isShowAtttrValue = ref(true)
const inputRef = ref<InputInstance>()
const attrInfo = reactive <attrInfoModel>({

  "attrName": "",//属性名称
  "attrValueList": [//属性的列表

  ],
  "categoryId": 0,//三级id
  "categoryLevel": 3,//三级

})
// 2根据我一二三级id来获取数据
const getAttrListData = async () => {
  const res = await reqgetAttrListData({
    category1Id: CategorySelecto.category1Id,
    category2Id: CategorySelecto.category2Id,
    category3Id: CategorySelecto.category3Id
  })
  console.log(res)
  attrList.value = res;
  console.log(attrList.value)

}
//3监听我三级id的变化
watch(() => CategorySelecto.category3Id, () => {
  getAttrListData()
})

//  4删除属性
const confirmEvent = async (row:attrInfoModel) => {
 
  await reqDeleteAttrData(row.id as number)
  ElMessage.success('删除成功了')
  //重新渲染数据
  getAttrListData()
}
//5取消删除属性
const cancelEvent = () => {
  ElMessage.info('删除取消了')


}
//6添加属性值的
const addAttrValu = () => {
  attrInfo.attrValueList.push({
    // attrId:attrInfo.categoryId
    valueName: '',
    IsShowInput: true,
  }

  )
  //页面中数据渲染完毕之后再渲染数据
  nextTick(() => {
    inputRef.value?.focus();
  })


 

   
}

//7失去焦点，自动删除为完成的属性值，
const Losevalue = (row:AttrValueModel) => {
  //判断输入框的数据为空的话，自动删除
  if (!row.valueName.trim()) {
    attrInfo.attrValueList.splice(-1)


    return
  }
  //要是有数据的话，自动保存，切换到spana\,当前的输入框有数据了，但不为空，切换到span
  row.IsShowInput = false;

}
//8双击span修改属性值
const changeAttrValue = (row:AttrValueModel) => {
  //输入框展示
  row.IsShowInput = true,
    //自动获取焦点
    nextTick(() => {

      inputRef.value?.focus()
    })


}
//9删除这条属性值
const DeleteEvent = (index: number) => {
  
  //删除某条属性
  attrInfo.attrValueList.splice(index, 1)


}
//10添加属性,点击保存的时候所要触发的事件
const saveOrUpdateAttrInfo = async () => {
  //用户区分是否是添加还是更新属性
 attrInfo.categoryId=CategorySelecto.category3Id as number
  await reqSaveAttrData(attrInfo)
  //成功的提示
  ElMessage.success('添加成功')
  //跳转到列表页
  IsShowAttr.value = true
  //重新请求数据
  getAttrListData()
 


}
//点击添加属性 那个按钮
//跳转到添加属性页
//将清除以前的老数据了
const addAttr = () => {
  IsShowAttr.value = false
  //清除以前的属性的旧值
  attrInfo.attrName = ''
  attrInfo.attrValueList = []
  //为了区分添加还是更新数据，要删除id
  delete attrInfo.id;


}
//点击编辑属性这个按钮，所要触发的事件
//所要执行的逻辑是跳转到添加属性页面，数据回显
const EditAttrValue = (row:attrInfoModel) => {
  //跳转页面到添加属性页面
  IsShowAttr.value = false;
  //数据回显
  Object.assign(attrInfo, row);
}


</script>
<style>

</style>